"use client"

import { View, Text, StyleSheet, TouchableOpacity, Modal, Platform } from "react-native"
import { LinearGradient } from "expo-linear-gradient"
import { X, Volume2, Keyboard, Clock } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface SpellSettingsModalProps {
    visible: boolean
    onClose: () => void
}

export function SpellSettingsModal({ visible, onClose }: SpellSettingsModalProps) {
    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.modalOverlay}>
                <View style={styles.modalContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>拼写设置</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={24} color={theme.colors.neutral.darkGray} />
                        </TouchableOpacity>
                    </View>

                    {/* 播放设置 */}
                    <View style={styles.section}>
                        <View style={styles.sectionHeader}>
                            <Volume2 size={20} color={theme.colors.primary.default} />
                            <Text style={styles.sectionTitle}>播放设置</Text>
                        </View>
                        <View style={styles.optionsContainer}>
                            <TouchableOpacity style={[styles.optionButton, styles.optionButtonActive]}>
                                <Text style={[styles.optionButtonText, styles.optionButtonTextActive]}>自动播放</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.optionButton}>
                                <Text style={styles.optionButtonText}>手动播放</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 键盘设置 */}
                    <View style={styles.section}>
                        <View style={styles.sectionHeader}>
                            <Keyboard size={20} color={theme.colors.primary.default} />
                            <Text style={styles.sectionTitle}>键盘设置</Text>
                        </View>
                        <View style={styles.optionsContainer}>
                            <TouchableOpacity style={[styles.optionButton, styles.optionButtonActive]}>
                                <Text style={[styles.optionButtonText, styles.optionButtonTextActive]}>显示提示</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.optionButton}>
                                <Text style={styles.optionButtonText}>隐藏提示</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 时间设置 */}
                    <View style={styles.section}>
                        <View style={styles.sectionHeader}>
                            <Clock size={20} color={theme.colors.primary.default} />
                            <Text style={styles.sectionTitle}>时间设置</Text>
                        </View>
                        <View style={styles.optionsContainer}>
                            <TouchableOpacity style={[styles.optionButton, styles.optionButtonActive]}>
                                <Text style={[styles.optionButtonText, styles.optionButtonTextActive]}>无限制</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.optionButton}>
                                <Text style={styles.optionButtonText}>30秒</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.optionButton}>
                                <Text style={styles.optionButtonText}>60秒</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 确认按钮 */}
                    <TouchableOpacity style={styles.confirmButton} onPress={onClose}>
                        <LinearGradient colors={theme.colors.primary.gradient} style={styles.confirmButtonGradient}>
                            <Text style={styles.confirmButtonText}>确定</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        width: "90%",
        maxWidth: 400,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
            },
            android: {
                elevation: 10,
            },
        }),
    },
    modalHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.xl,
    },
    modalTitle: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    modalCloseButton: {
        padding: theme.spacing.sm,
    },
    section: {
        marginBottom: theme.spacing.xl,
    },
    sectionHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    sectionTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    optionsContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.sm,
    },
    optionButton: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        backgroundColor: theme.colors.neutral.lightGray,
        borderWidth: 1,
        borderColor: "transparent",
    },
    optionButtonActive: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderColor: theme.colors.primary.default,
    },
    optionButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    optionButtonTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    confirmButton: {
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        marginTop: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.3,
                shadowRadius: 5,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    confirmButtonGradient: {
        paddingVertical: theme.spacing.lg,
        alignItems: "center",
        justifyContent: "center",
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

